<script setup lang="ts">
// 投放资源位
import {message} from "ant-design-vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: ''
  },
  staticAdPkgLists: {
    type: Array,
    default: () => []
  },
});
const emit = defineEmits([
  "refresh",
]);
const visible = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
};
const adzoneList = ref<any[]>(props.staticAdPkgLists.map((item: any) => {
  return {
    adzoneId: item.code,
    discount: item.properties.def,
    status: item.status==1,
  };
}));
watch(() => props.staticAdPkgLists, (newVal) => {
  adzoneList.value = newVal.map((item: any) => {
    return {
      adzoneId: item.code,
      discount: item.properties.def,
      status: item.status==1,
    };
  });
},{
  deep: true,
});
const update = () => {
  const campaignIds: string[] = props.rows.map((r: any) => r.campaignId);
  WxtUtils.advancedBatchUpdate([
    ...campaignIds.map((campaignId: string) => ({
      campaignId,
      adzoneList: adzoneList.value.map((item: any) => {
        return {
          adzoneId: item.adzoneId,
          discount: item.discount,
          status: item.status?'start':'pause',
        };
      })
    })),
  ], props.bizCode).then(res => {
    visible.value = false;
    if (res.data.info.ok !== true) {
      message.error(res.data.info.message)
      return;
    }
    message.success("设置资源位成功！");
  }).finally(() => {
    emit("refresh");
  });
};
</script>

<template>
  <div @click="handle">
    <slot>
      <a-button size="small" type="primary" ghost>投放资源位</a-button>
    </slot>
  </div>
  <wxt-modal v-model:visible="visible" title="设置资源位" :width="850" :style="{
    top: 'revert-layer',
  }">
    <a-row type="flex" class="header" v-if="rows.length>0">
      <a-col :span="4">
        资源位
      </a-col>
      <a-col flex="1">

      </a-col>
      <a-col :span="4">
        溢价比例
      </a-col>
      <a-col :span="4" style="text-align: center;">
        操作
      </a-col>
    </a-row>
    <a-row type="flex" v-for="(item,key) in staticAdPkgLists" class="item">
      <a-col :span="4">
        {{ item.name }}
      </a-col>
      <a-col flex="1" class="desc">
        （{{ item.description }}）
      </a-col>
      <a-col :span="4" class="" v-if="adzoneList[key]">
        <a-input-number v-if="item.properties.discount"
                        v-model:value="adzoneList[key].discount"
                        :min="item.properties.min" :max="item.properties.max" :step="1" size="small" style="width: 100px;"
        >
          <template #addonAfter>
            %
          </template>
        </a-input-number>
        <div class="desc" v-else>
          不支持溢价
        </div>
      </a-col>
      <a-col :span="4" style="text-align: center" v-if="adzoneList[key]">
        <a-switch v-model:checked="adzoneList[key].status"/>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0;"/>
    <a-row type="flex" style="text-align: right;">
      <a-col flex="1"/>
      <a-col>
        <a-space>
          <a-button type="default" @click="visible=false">取消</a-button>
          <a-button type="primary" @click="update">确定</a-button>
        </a-space>
      </a-col>
    </a-row>
  </wxt-modal>
</template>

<style lang="less" scoped>
.header {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
  //border-bottom: 1px solid #eee;
}

.item {
  padding: 10px 0;
  border-top: #eee 1px solid;

  .desc {
    color: #999;
    font-size: 12px;
  }
}
</style>
